<script setup>
import {useRoute, useRouter} from "vue-router";
import {definedUser} from "../store/user.js";

let $store_user = definedUser()
let $router = useRouter()
let $route = useRoute()

// 从会话中取 url_path 一开始没有--》没有就是 / 根路径
let url_path = sessionStorage.url_path || '/'

// 取出当前所在路径，放到会话级别 url_path
sessionStorage.url_path = $route.path
const goPage = (path) => {   //  /根路径  /login
  if (url_path !== path) {
    $router.push(path)
  }
  sessionStorage.url_path = path
}

// ************** Login，Register页面控制 **************
import Login from "./Login.vue";
import Register from "./Register.vue";
import $cookie from 'vue-cookies'
import {ref} from "vue";

const is_login = ref(false)
const is_register = ref(false)
// const username = ref($cookie.get('username'))
// const icon = ref($cookie.get('icon'))

const put_login = () => {
  is_login.value = true
  is_register.value = false
}

const put_register = () => {
  is_login.value = false
  is_register.value = true
}

const close_login = () => {
  is_login.value = false
  // 取出 cookie中的用户名和头像，显示在header组件中
  // username.value = $cookie.get('username')
  // icon.value = $cookie.get('icon')
}
const close_register = () => {
  is_register.value = false
}

// const log_out = () => {
//   $cookie.remove('username')
//   $cookie.remove('icon')
//   $cookie.remove('token')
// }

// ################### 搜索框 ###################
import {ElMessage} from "element-plus";

const is_search_tip = ref(true)
const search_placeholder = ref('')
const search_word = ref('')

function search_action(search_word) {
  if (!search_word) {
    ElMessage({
      type: 'error',
      message: '请输入要搜索的内容'
    })
    return
  }
  if (search_word !== $route.query.word) {
    $router.push(`/course/search?word=${search_word}`);
  }
  search_word.value = '';
}

function on_search() {
  search_placeholder.value = '请输入想搜索的课程';
  is_search_tip.value = false;
}

function off_search() {
  search_placeholder.value = '';
  is_search_tip.value = true;
}


</script>

<template>
  <div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="../assets/img/head-logo.svg" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
        </li>
      </ul>

      <div class="right-part">
        <div v-if="$store_user.login_user.username">
          <el-avatar :src="$store_user.login_user.icon"></el-avatar>
          <span>{{ $store_user.login_user.username }}</span>
          <span class="line">|</span>
          <span @click="$store_user.log_out">注销</span>

        </div>

        <div v-else>
          <span @click="put_login">登录</span>
          <span class="line">|</span>
          <span @click="put_register">注册</span>
        </div>


        <Login v-if="is_login" @close="close_login" @go="put_register"></Login>
        <Register v-if="is_register" @close="close_register" @go="put_login"></Register>
      </div>

      <form class="search">
        <div class="tips" v-if="is_search_tip">
          <span @click="search_action('Python')">Python</span>
          <span @click="search_action('Linux')">Linux</span>
        </div>
        <input type="text" :placeholder="search_placeholder" @focus="on_search" @blur="off_search"
               v-model="search_word">
        <img src="../assets/img/search.svg" class="actual-search-button"
             @click.prevent.stop="search_action(search_word)"/>
      </form>
    </div>
  </div>
</template>

<style scoped>
.search {
  float: right;
  position: relative;
  margin-top: 22px;
  margin-right: 10px;
}

.search input, .search button {
  border: none;
  outline: none;
  background-color: white;
}

.search input {
  border-bottom: 1px solid #eeeeee;
}

.search input:focus {
  border-bottom-color: orange;
}

.search input:focus + button {
  color: orange;
}

.search .tips {
  position: absolute;
  bottom: 3px;
  left: 0;
}

.search .tips span {
  border-radius: 11px;
  background-color: #eee;
  line-height: 22px;
  display: inline-block;
  padding: 0 7px;
  margin-right: 3px;
  cursor: pointer;
  color: #aaa;
  font-size: 14px;

}

.search .tips span:hover {
  color: orange;
}

.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>